<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🏆 GitCode&文心大模型&智源研究院AI应用开发大赛</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1e3a8a;
            --secondary-color: #3b82f6;
            --accent-color: #f59e0b;
            --success-color: #10b981;
            --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--gradient-bg);
            min-height: 100vh;
        }

        .hero-section {
            background: linear-gradient(rgba(30, 58, 138, 0.9), rgba(59, 130, 246, 0.8)), 
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23667eea"/><stop offset="100%" stop-color="%23764ba2"/></radialGradient></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>');
            color: white;
            padding: 4rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            animation: float 20s infinite linear;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-100px); }
        }

        .competition-badge {
            background: var(--accent-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-weight: bold;
            display: inline-block;
            margin-bottom: 1rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            margin: 1rem 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            border-color: var(--secondary-color);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }

        .chat-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            height: 600px;
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            background: var(--primary-color);
            color: white;
            padding: 1rem;
            border-radius: 15px 15px 0 0;
            display: flex;
            align-items: center;
            justify-content: between;
        }

        .chat-messages {
            flex: 1;
            padding: 1rem;
            overflow-y: auto;
            background: #f8f9fa;
        }

        .message {
            margin: 1rem 0;
            padding: 1rem;
            border-radius: 10px;
            max-width: 80%;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background: var(--secondary-color);
            color: white;
            margin-left: auto;
            text-align: right;
        }

        .ai-message {
            background: white;
            border: 2px solid #e5e7eb;
            margin-right: auto;
        }

        .chat-input {
            padding: 1rem;
            border-top: 1px solid #e5e7eb;
            border-radius: 0 0 15px 15px;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }

        .status-online { background: var(--success-color); }
        .status-offline { background: #ef4444; }
        .status-loading { background: var(--accent-color); animation: blink 1s infinite; }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0.3; }
        }

        .infinity-badge {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .model-info {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 1rem;
            margin: 1rem 0;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .task-selector {
            margin: 1rem 0;
        }

        .task-btn {
            margin: 0.25rem;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .task-btn.active {
            background: var(--accent-color);
            border-color: var(--accent-color);
            transform: scale(1.05);
        }

        .loading-spinner {
            display: none;
            text-align: center;
            padding: 1rem;
        }

        .spinner-border {
            color: var(--secondary-color);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="competition-badge">
                <i class="fas fa-trophy"></i> GitCode&文心大模型&智源研究院AI应用开发大赛
            </div>
            <h1 class="display-4 fw-bold mb-3">🎯 赛道二（空手上场）</h1>
            <h2 class="h3 mb-4">ERNIE-4.5-0.3B + Infinity-Instruct 智能应用</h2>
            
            <div class="model-info">
                <div class="row">
                    <div class="col-md-4">
                        <h5><i class="fas fa-brain"></i> 模型层</h5>
                        <p>ERNIE-4.5-0.3B-Paddle<br>百度文心大模型</p>
                    </div>
                    <div class="col-md-4">
                        <h5><i class="fas fa-database"></i> 知识层</h5>
                        <p>Infinity-Instruct<br>智源研究院数据集</p>
                    </div>
                    <div class="col-md-4">
                        <h5><i class="fas fa-rocket"></i> 应用层</h5>
                        <p>超级个体生产力工具<br>沉浸式学习伴侣</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container my-5">
        <div class="row">
            <!-- Features -->
            <div class="col-lg-4">
                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h4>🎓 智能学习助手</h4>
                    <p>基于Infinity-Instruct数据集的个性化学习路径规划，结合ERNIE-4.5模型提供专业指导。</p>
                    <div class="infinity-badge">Infinity-Instruct 驱动</div>
                </div>

                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h4>⚡ 生产力工具</h4>
                    <p>智能任务管理、时间规划、知识整理，让您成为超级个体。</p>
                    <div class="infinity-badge">ERNIE-4.5 增强</div>
                </div>

                <div class="feature-card text-center">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h4>📊 深度分析</h4>
                    <p>结合智源研究院数据，提供专业级别的分析和洞察。</p>
                    <div class="infinity-badge">智源数据集</div>
                </div>
            </div>

            <!-- Chat Interface -->
            <div class="col-lg-8">
                <div class="chat-container">
                    <div class="chat-header">
                        <div>
                            <h5 class="mb-0">
                                <span id="status-indicator" class="status-indicator status-loading"></span>
                                ERNIE-4.5 + Infinity-Instruct 智能助手
                            </h5>
                            <small>基于智源研究院数据集的AI对话系统</small>
                        </div>
                        <div class="ms-auto">
                            <button class="btn btn-outline-light btn-sm" onclick="clearChat()">
                                <i class="fas fa-trash"></i> 清空
                            </button>
                        </div>
                    </div>

                    <div class="task-selector text-center p-3 bg-light">
                        <h6 class="mb-2">选择任务类型：</h6>
                        <button class="btn btn-outline-primary task-btn active" data-task="general">
                            <i class="fas fa-comments"></i> 通用对话
                        </button>
                        <button class="btn btn-outline-success task-btn" data-task="learning">
                            <i class="fas fa-book"></i> 学习辅导
                        </button>
                        <button class="btn btn-outline-warning task-btn" data-task="productivity">
                            <i class="fas fa-rocket"></i> 生产力提升
                        </button>
                        <button class="btn btn-outline-info task-btn" data-task="creativity">
                            <i class="fas fa-lightbulb"></i> 创意激发
                        </button>
                        <button class="btn btn-outline-danger task-btn" data-task="analysis">
                            <i class="fas fa-chart-bar"></i> 深度分析
                        </button>
                    </div>

                    <div class="chat-messages" id="chat-messages">
                        <div class="ai-message message">
                            <strong>🤖 ERNIE-4.5 助手</strong><br>
                            您好！我是基于ERNIE-4.5-0.3B模型和智源研究院Infinity-Instruct数据集的AI助手。
                            <br><br>
                            我可以帮您：
                            <ul class="mt-2 mb-0">
                                <li>📚 个性化学习指导</li>
                                <li>⚡ 生产力工具推荐</li>
                                <li>💡 创意思维激发</li>
                                <li>📊 专业问题分析</li>
                                <li>🎯 目标规划建议</li>
                            </ul>
                            <div class="mt-2">
                                <span class="infinity-badge">Infinity-Instruct</span>
                                <span class="infinity-badge">ERNIE-4.5</span>
                            </div>
                        </div>
                    </div>

                    <div class="loading-spinner" id="loading-spinner">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">正在思考...</span>
                        </div>
                        <p class="mt-2">ERNIE-4.5正在结合Infinity-Instruct数据分析中...</p>
                    </div>

                    <div class="chat-input">
                        <div class="input-group">
                            <input type="text" class="form-control" id="user-input" 
                                   placeholder="请输入您的问题..." onkeypress="handleKeyPress(event)">
                            <button class="btn btn-primary" onclick="sendMessage()">
                                <i class="fas fa-paper-plane"></i> 发送
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Status -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="feature-card">
                    <h5><i class="fas fa-cog"></i> 系统状态</h5>
                    <div class="row" id="system-status">
                        <div class="col-md-3">
                            <strong>ERNIE-4.5模型:</strong> <span id="model-status">检查中...</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Infinity-Instruct:</strong> <span id="dataset-status">检查中...</span>
                        </div>
                        <div class="col-md-3">
                            <strong>数据类别:</strong> <span id="categories-status">检查中...</span>
                        </div>
                        <div class="col-md-3">
                            <strong>竞赛赛道:</strong> <span class="text-success">赛道二（空手上场）</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let currentTask = 'general';

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            checkSystemStatus();
            
            // 任务选择器事件
            document.querySelectorAll('.task-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.task-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    currentTask = this.dataset.task;
                });
            });
        });

        // 检查系统状态
        async function checkSystemStatus() {
            try {
                const response = await fetch('/api/system_status');
                const data = await response.json();
                
                document.getElementById('model-status').innerHTML = 
                    data.model.ernie_loaded ? 
                    '<span class="text-success">✅ 已加载</span>' : 
                    '<span class="text-warning">⚠️ 模拟模式</span>';
                
                document.getElementById('dataset-status').innerHTML = 
                    `<span class="text-success">✅ ${data.dataset.total_samples} 条数据</span>`;
                
                document.getElementById('categories-status').innerHTML = 
                    `<span class="text-success">✅ ${data.dataset.categories.length} 个类别</span>`;
                
                // 更新状态指示器
                const indicator = document.getElementById('status-indicator');
                if (data.model.ernie_loaded) {
                    indicator.className = 'status-indicator status-online';
                } else {
                    indicator.className = 'status-indicator status-offline';
                }
                
            } catch (error) {
                console.error('系统状态检查失败:', error);
                document.getElementById('model-status').innerHTML = 
                    '<span class="text-danger">❌ 检查失败</span>';
            }
        }

        // 发送消息
        async function sendMessage() {
            const input = document.getElementById('user-input');
            const message = input.value.trim();
            
            if (!message) return;
            
            // 显示用户消息
            addMessage(message, 'user');
            input.value = '';
            
            // 显示加载状态
            showLoading(true);
            
            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: message,
                        task_type: currentTask
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    // 显示AI回复
                    addAIMessage(data.response, data.infinity_context, data.metadata);
                } else {
                    addMessage('抱歉，处理您的请求时出现错误。', 'ai');
                }
                
            } catch (error) {
                console.error('发送消息失败:', error);
                addMessage('网络连接错误，请稍后重试。', 'ai');
            } finally {
                showLoading(false);
            }
        }

        // 添加消息
        function addMessage(text, sender) {
            const messagesContainer = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}-message`;
            
            if (sender === 'user') {
                messageDiv.innerHTML = `<strong>👤 您:</strong><br>${text}`;
            } else {
                messageDiv.innerHTML = `<strong>🤖 ERNIE-4.5:</strong><br>${text}`;
            }
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 添加AI消息（带上下文信息）
        function addAIMessage(response, infinityContext, metadata) {
            const messagesContainer = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message ai-message';
            
            let contextInfo = '';
            if (infinityContext && infinityContext.length > 0) {
                contextInfo = `
                    <div class="mt-2 p-2 bg-light rounded">
                        <small><strong>📚 参考数据 (Infinity-Instruct):</strong></small><br>
                        <small>${infinityContext.length} 条相关数据 | 类别: ${infinityContext.map(c => c.category).join(', ')}</small>
                    </div>
                `;
            }
            
            const metadataInfo = `
                <div class="mt-2">
                    <span class="infinity-badge">置信度: ${(metadata.confidence * 100).toFixed(1)}%</span>
                    <span class="infinity-badge">响应时间: ${metadata.generation_time.toFixed(2)}s</span>
                    <span class="infinity-badge">${metadata.model_status}</span>
                </div>
            `;
            
            messageDiv.innerHTML = `
                <strong>🤖 ERNIE-4.5 助手:</strong><br>
                ${response}
                ${contextInfo}
                ${metadataInfo}
            `;
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 显示/隐藏加载状态
        function showLoading(show) {
            const spinner = document.getElementById('loading-spinner');
            spinner.style.display = show ? 'block' : 'none';
        }

        // 清空聊天
        function clearChat() {
            const messagesContainer = document.getElementById('chat-messages');
            messagesContainer.innerHTML = `
                <div class="ai-message message">
                    <strong>🤖 ERNIE-4.5 助手</strong><br>
                    聊天记录已清空。我是基于ERNIE-4.5-0.3B模型和智源研究院Infinity-Instruct数据集的AI助手，随时为您服务！
                    <div class="mt-2">
                        <span class="infinity-badge">Infinity-Instruct</span>
                        <span class="infinity-badge">ERNIE-4.5</span>
                    </div>
                </div>
            `;
        }

        // 键盘事件处理
        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }

        // 定期检查系统状态
        setInterval(checkSystemStatus, 30000); // 每30秒检查一次
    </script>
</body>
</html>